<%--
  Created by IntelliJ IDEA.
  User: 沸羊羊
  Date: 2022/11/24
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        #main{
            position: absolute;
            left: 30px;
            top: 20px;
        }
        #main2{
            position: absolute;
            left: 650px;
            top: 20px;
        }
        #main3{
            position: absolute;
            left: 20px;
            top: 370px;
        }
    </style>
</head>
<body>
<div id="main" style="width: 400px;height:400px;"></div>
<div id="main2" style="width: 400px;height: 400px"></div>
<div id="main3" style="width: 1300px;height: 400px"></div>
<script type="text/javascript">
    $(function () {
        aa1()
    })
    function aa1() {
        var a=[]
        var b=[]
        $.get("queryCellByDatels.action",function (data) {
            $(data).each(function (index,item) {
                a.push(item.productName)
                b.push(item.amount)
            })
            aa(a,b);

        },"json")
    }
    function aa(a,b) {
        var myChart = echarts.init(document.getElementById('main'));
        // prettier-ignore

        let dataAxis =a
        // prettier-ignore
        let data =b
        let yMax = 500;
        let dataShadow = [];
        for (let i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        var option = {
            title: {
                text: '仓库数据',
                subtext: ''

            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    color: '#fff'
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999999'
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#4c535f' },
                                { offset: 1, color: '#83bff6' }
                            ])
                        }
                    },
                    data: data
                }
            ]
        };
        // Enable data zoom when user click bar.
        const zoomSize = 6;
        myChart.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            myChart.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue:
                    dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });
        myChart.setOption(option);
    }

    $(function () {
        aa2()
    })

    function aa2() {
        var x=[]
        $.get("queryFileAll.action",function (data) {
            $(data).each(function (index,item) {
                x.push({value:item.costprice,name:item.productname})
            })
            xx(x);
        },"json")
    }

    function xx(x) {
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '产品数据计划价格',
                subtext: ''

            },
            tooltip: {
                trigger: 'item'
            },
            /*  legend: {
                  top: '0%',
                  left: '300px'
              },*/
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: x
                }
            ]
        };

        option && myChart.setOption(option);
    }

    $(function () {
        aa3()
    })

    function aa3() {
        var l=[]
        var q=[]
        $.get("queryFileAll.action",function (data) {
            console.log(data)
            $(data).each(function (index,item) {
                l.push(item.productname)
                q.push(item.listprice)
                console.log(item)
            })
            aa33(l,q);
        },"json")
    }

    function aa33(l,q) {
        var chartDom = document.getElementById('main3');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '产品数据市场价格',
                subtext: ''

            },
            xAxis: {
                type: 'category',
                data: l,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: q,
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    }
</script>
</body>
</html>
